﻿<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script src="js/jstools.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/raphael.js" type="text/javascript" charset="utf-8"></script>

    <script src="js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery/jquery.progressbar.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery/jquery.asyncqueue.js" type="text/javascript" charset="utf-8"></script>

    <script src="js/Color.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/Polyline.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ActivityImpl.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ActivitiRest.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/LineBreakMeasurer.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ProcessDiagramGenerator.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ProcessDiagramCanvas.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen"></style>
  </head>
  <body>
    <div class="wrapper">
      <div id="pb1"></div>
      <div id="overlayBox">
        <div id="diagramBreadCrumbs" class="diagramBreadCrumbs" onmousedown="return false" onselectstart="return false"></div>
        <div id="diagramHolder" class="diagramHolder"></div>
        <div class="diagram-info" id="diagramInfo"></div>
      </div>
    </div>
    <script language="javascript">
      var DiagramGenerator = {};
      var pb1;
      $(document).ready(function () {
        var query_string = {};
        var query = window.location.search.substring(1);
        var vars = query.split('&');
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split('=');
          query_string[pair[0]] = pair[1];
        }

        var processDefinitionId = query_string['processDefinitionId'];
        var processInstanceId = query_string['processInstanceId'];

        console.log('Initialize progress bar');

        pb1 = new $.ProgressBar({
          boundingBox: '#pb1',
          label: 'Progressbar!',
          on: {
            complete: function () {
              console.log('Progress Bar COMPLETE');
              this.set('label', 'complete!');
              if (processInstanceId) {
                ProcessDiagramGenerator.drawHighLights(processInstanceId);
              }
            },
            valueChange: function (e) {
              this.set('label', e.newVal + '%');
            },
          },
          value: 0,
        });
        console.log('Progress bar inited');

        ProcessDiagramGenerator.options = {
          diagramBreadCrumbsId: 'diagramBreadCrumbs',
          diagramHolderId: 'diagramHolder',
          diagramInfoId: 'diagramInfo',
          on: {
            click: function (canvas, element, contextObject) {
              var mouseEvent = this;
              console.log(
                '[CLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o',
                mouseEvent,
                canvas,
                element,
                contextObject
              );

              if (contextObject.getProperty('type') == 'callActivity') {
                var processDefinitonKey = contextObject.getProperty('processDefinitonKey');
                var processDefinitons = contextObject.getProperty('processDefinitons');
                var processDefiniton = processDefinitons[0];
                console.log("Load callActivity '" + processDefiniton.processDefinitionKey + "', contextObject: ", contextObject);

                // Load processDefinition
                ProcessDiagramGenerator.drawDiagram(processDefiniton.processDefinitionId);
              }
            },
            rightClick: function (canvas, element, contextObject) {
              var mouseEvent = this;
              console.log(
                '[RIGHTCLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o',
                mouseEvent,
                canvas,
                element,
                contextObject
              );
            },
            over: function (canvas, element, contextObject) {
              var mouseEvent = this;
              //console.log("[OVER] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);

              // TODO: show tooltip-window with contextObject info
              ProcessDiagramGenerator.showActivityInfo(contextObject);
            },
            out: function (canvas, element, contextObject) {
              var mouseEvent = this;
              //console.log("[OUT] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);

              ProcessDiagramGenerator.hideInfo();
            },
          },
        };

        var baseUrl = window.document.location.protocol + '//' + window.document.location.host + '/';
        var shortenedUrl = window.document.location.href.replace(baseUrl, '');
        baseUrl = baseUrl + shortenedUrl.substring(0, shortenedUrl.indexOf('/'));

        ActivitiRest.options = {
          processInstanceHighLightsUrl: baseUrl + '/service/process-instance/{processInstanceId}/highlights?callback=?',
          processDefinitionUrl: baseUrl + '/service/process-definition/{processDefinitionId}/diagram-layout?callback=?',
          processDefinitionByKeyUrl: baseUrl + '/service/process-definition/{processDefinitionKey}/diagram-layout?callback=?',
        };

        if (processDefinitionId) {
          ProcessDiagramGenerator.drawDiagram(processDefinitionId);
        } else {
          alert('processDefinitionId parameter is required');
        }
      });
    </script>
  </body>
</html>
